<template>
	<view class="regisAct">
		<view class="regis">
			<form @submit.stop="regisAct" @reset="">
				<view class="p-title">
					<view class="title-tip">姓名</view>
					<input type="text" name="appl_name" :value="appl_name" placeholder="请输入姓名" class="cirname" maxlength="20"/>
				</view>
				<view class="p-title">
					<view class="title-tip">联系号码</view>
					<input type="text" name="phone" :value="phone" placeholder="请输入联系号码" class="cirname" maxlength="20"/>
				</view>
				<view class="p-title">
					<view class="title-tip">报名人数</view>
					<input type="text" name="people_num" :value="people_num" placeholder="请输入报名人数" class="cirname" maxlength="20"/>
				</view>
				<button  form-type="submit" class="regis_btn">报名</button>
			</form>
		</view>
	</view>
</template>

<script>
	import graceChecker from '../../../common/graceChecker.js'
	import api from '../../../common/api.js'
	export default {
		data() {
			return {
				actid:'', 			//活动id
				cir_id:'',			//圈子id
				appl_name:'',		//报名用户名称	
				phone:'',				//联系方式	
				people_num:'',	//报名人数
				ispost:1,
			}
		},
		
		onLoad(p) {
			console.log(p);
			this.actid = p.act_id
			this.cir_id = p.cir_id
		},
		
		methods:{
			async regisAct(e) {//报名活动
				console.log(e);
				if(!this.ispost) {
					uni.showToast({ title: '请勿重复提交 ', icon: "none" });
					return 
				}
				let {appl_name,phone,people_num} = e.detail.value
				var rule = [
					{name:"appl_name", checkType : "notnull", checkRule:"0,", errorMsg:"姓名不能为空"},
					{name:"phone", checkType : "phoneno", errorMsg:"请输入正确的联系号码"},
					{name:"people_num", checkType : "int", errorMsg:"请输入正确的报名人数"},
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				
				uni.showLoading({
					title:'提交中'
				});
				let cres = await api.RegisActivity(this.actid,appl_name,phone,people_num)
				if(cres.err == 0) {
					this.ispost = 0	
					uni.hideLoading()
					uni.navigateTo({//跳转到报名成功页面
						url:'/pages/activity/comps/successRegis?cir_id='+ this.cir_id
					})
				}else {
					uni.hideLoading()
					uni.showToast({
						title:cres.msg,
						duration:800,
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.regis {
	height: 100vh;
	padding: 20rpx 30rpx;
	background-color: #fff;
	.p-title{
		padding: 10rpx 0;
		.title-tip {
			margin: 15rpx 10rpx;
		}
		input {
			font-size: 28rpx;
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.9);
			border-radius: 15rpx;
		  padding: 20rpx 30rpx;
		}
	}
}
.regis_btn {
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;
	width: 580rpx;
	left: 0;
	margin: auto;
	right: 0;
	
	bottom: 170rpx;
	height: 90rpx;
	border-radius: 40rpx;
	z-index: 1;
	background-color: #0068ff;
	color: #fff;
	font-size: 32rpx;
	}
	.tip {
		display: flex;
		justify-content: center;
		position: absolute;
		width: 580rpx;
		left: 0;
		margin: 30rpx auto;
		bottom: 90rpx;
		right: 0;
		color: #A7AAB5;
		bottom: 10rpx;
		height: 90rpx;
	}
</style>
